<div [@routerTransition]>
  <nz-spin [nzTip]="l('LogIningWithThreeDot')" [nzSpinning]="submitting">
    <nz-card [nzTitle]="nzTitle" nzHoverable='true'>
      <ng-template #nzTitle>
        <div class="text-center yoyo__block">
          <i class="anticon anticon-login"></i>
          <span>{{l('LogIn')}}</span>
        </div>
      </ng-template>

      <form nz-form #loginForm="ngForm" (ngSubmit)="login()" autocomplete="off">
        <br>
        <!-- 账号 -->
        <nz-form-item>
          <nz-form-control>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="userNameOrEmailAddress" #userNameOrEmailAddressInput="ngModel" [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress"
                [placeholder]="l('UserNameOrEmail')" required maxlength="255">
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

        <!-- 密码 -->
        <nz-form-item>
          <nz-form-control>
            <nz-input-group nzPrefixIcon="anticon anticon-lock">
              <input nz-input name="password" #passwordInput="ngModel" [(ngModel)]="loginService.authenticateModel.password"
                [placeholder]="l('Password')" type="password" required maxlength="32">
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

        <!-- 验证码 -->
        <nz-form-item *ngIf="useCaptcha">
          <nz-form-control>
            <yoyo-captcha #captcha name="verificationCode" #verificationCodeInput="ngModel" [(ngModel)]="loginService.authenticateModel.verificationCode"
              [placeholder]="l('CAPTCHA')" [type]="captchaType" [key]="loginService.authenticateModel.userNameOrEmailAddress"
              (keyup)="onKey($event)" required [minlength]="captchaLength" [maxlength]="captchaLength">
            </yoyo-captcha>

            <nz-form-explain *ngIf="verificationCodeInput.control.dirty&&verificationCodeInput.control.errors">
              <ng-container *ngIf="verificationCodeInput.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
              <ng-container *ngIf="verificationCodeInput.control.hasError('minlength')||verificationCodeInput.control.hasError('maxlength')">
                {{l('LengthError')}}
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <!-- 记住我 -->
        <nz-form-item>
          <nz-col [nzSpan]="12" class="text-left">
            <label nz-checkbox [(ngModel)]="loginService.rememberMe" name="rememberMe">
              <span>{{l("RememberMe")}}</span>
            </label>
          </nz-col>

          <nz-col [nzSpan]="12" class="text-right">
            <a routerLink="/account/forgot-password" class="forgot forget-password">{{l("ForgotPassword")}}</a>
          </nz-col>

        </nz-form-item>

        <!-- 登陆按钮 -->
        <button nz-button [nzType]="'primary'" [nzLoading]="submitting" class="yoyo__block" [disabled]="!loginForm.form.valid||submitting">
          <i class="anticon anticon-login"></i>
          <span>{{l("LogIn")}}</span>
        </button>

      </form>

      <div class="login-action-items">
        <div class="links">
          <br>
          <!-- 用户注册 -->
          <span *ngIf="isSelfRegistrationAllowed">
            <a routerLink="/account/register">{{l("CreateAnAccount")}}</a>
            <nz-divider nzType="vertical"></nz-divider>
          </span>
          <!-- 租户注册 -->
          <span *ngIf="isTenantSelfRegistrationAllowed">
            <a routerLink="/account/tenant-register">{{l("TenantRegister")}}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <nz-form-extra>请通过租户注册来查看完整系统内容</nz-form-extra>

          </span>
          <!-- //todo: 等待有缘人帮我们完善吧 -->
          <!-- <span>
            <a routerLink="/account/email-activation">{{l("EmailActivation")}}</a>
          </span> -->
        </div>
      </div>


    </nz-card>
  </nz-spin>
</div>
